<template>
  <div class="typeConfig">
    <div class="content">
      <div class="left">
        <div style="margin-bottom: 15px">
          <h3>服务类型配置</h3>
        </div>
        <div style="height: 40px">
          <div class="btnContainer">
            <Button class="btn" @click="deleteTypes"
              ><Icon type="ios-trash-outline" />&nbsp;删除</Button
            >
            <Button class="btn" @click="registType"
              ><Icon type="md-add" />&nbsp;新建类型</Button
            >
          </div>
        </div>
        <Table
          :columns="columns_left"
          :data="serviceType"
          border
          @on-selection-change="selectionChange_left"
        >
          <template slot-scope="{ row }" slot="action">
            <Button type="error" size="small" @click="deleteType(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div class="pageContainer">
          <Page
            :total="typeTotal"
            show-elevator
            show-total
            @on-change="pageParams_left"
          ></Page>
        </div>
      </div>
      <div class="right">
        <div style="margin-bottom: 15px">
          <h3>主题分类配置</h3>
        </div>
        <div style="height: 40px">
          <div class="btnContainer">
            <Button type="primary" class="btn" @click="deleteThemeClasses"
              ><Icon type="ios-trash-outline" />&nbsp;删除</Button
            >
            <Button type="primary" class="btn" @click="registThemeClass"
              ><Icon type="md-add" />&nbsp;新建主题分类</Button
            >
          </div>
        </div>
        <Table
          :columns="columns_right"
          :data="serviceThemeClass"
          border
          @on-selection-change="selectionChange_right"
        >
          <template slot-scope="{ row }" slot="action">
            <Button type="error" size="small" @click="deleteThemeClass(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div class="pageContainer">
          <Page
            :total="themeClassTotal"
            show-elevator
            show-total
            @on-change="pageParams_right"
          ></Page>
        </div>
      </div>
    </div>
    <Modal
      v-model="isModalShowType"
      :title="typeModalTitle"
      @on-ok="okClick_type"
    >
      <div id="modalContainer">
        <Row>
          <Col span="24">
            <label>服务类型名：</label>
            <Input v-model="type" placeholder="请输入服务类型名" />
          </Col>
        </Row>
      </div>
    </Modal>
    <Modal
      v-model="isModalShowThemeClass"
      :title="themeModalTitle"
      @on-ok="okClick_theme"
    >
      <div id="modalContainer">
        <Row>
          <Col span="24">
            <label>主题分类名：</label>
            <Input v-model="themeClass" placeholder="请输入主题分类名" />
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "TypeConfig",
  data() {
    return {
      columns_left: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "服务类型",
          key: "type",
        },
        {
          title: "成员数",
          key: "members",
        },
        {
          title: "操作",
          slot: "action",
          width: 160,
          align: "center",
        },
      ],
      serviceType: [],
      typeModalTitle: "",
      page_left: 1,
      size_left: 10,
      typeTotal: 0,
      type: "",
      isModalShowType: false,
      selections_left: [],
      columns_right: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "主题分类",
          key: "themeClass",
        },
        {
          title: "成员数",
          key: "members",
        },
        {
          title: "操作",
          slot: "action",
          width: 160,
          align: "center",
        },
      ],
      serviceThemeClass: [],
      themeModalTitle: "",
      page_right: 1,
      size_right: 10,
      themeClassTotal: 0,
      themeClass: "",
      isModalShowThemeClass: false,
      selections_right: [],
    };
  },
  mounted() {
    this.getTypeTable();
    this.getThemeClass();
  },
  methods: {
    getTypeTable() {
      this.axios
        .get("/type", {
          page: this.page_left,
          size: this.size_left,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.serviceType = res.data.data;
            this.typeTotal = res.data.total;
          } else {
            this.$Message.info("当前没有服务类型！");
          }
        });
    },
    selectionChange_left(selections) {
      this.selections_left = selections.map((selection) => {
        return { id: selection.id, members: selection.members };
      });
    },
    deleteType(row) {
      if (row.members == 0) {
        this.axios
          .delete("/type", {
            data: {
              typeIds: [row.id],
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.getTypeTable();
            } else {
              this.$Message.info("无法删除！");
            }
          });
      } else {
        this.$Message.info("成员数不为0，无法删除！");
      }
    },
    okClick_type() {
      this.axios.post("/type", { type: this.type }).then((res) => {
        if (res.data.code == 200) {
          this.isModalShowType = false;
          this.getTypeTable();
        }
      });
    },
    pageParams_left(page) {
      this.page_left = page;
      this.getTypeTable();
    },
    getThemeClass() {
      this.axios
        .get("/class", {
          page: this.page_right,
          size: this.size_right,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.serviceThemeClass = res.data.data;
            this.themeClassTotal = res.data.total;
          } else {
            this.$Message.info("当前没有主题分类！");
          }
        });
    },
    selectionChange_right(selections) {
      this.selections_right = selections.map((selection) => {
        return { id: selection.id, members: selection.members };
      });
    },
    deleteTypes() {
      let temp = [];
      let allowDelete = true;
      for (let i = 0; i < this.selections_left.length; i++) {
        if (this.selections_left[i].members == 0) {
          temp.push(this.selections_left[i].id);
        } else {
          allowDelete = false;
          break;
        }
      }
      if (allowDelete) {
        this.axios
          .delete("/type", {
            data: {
              typeIds: temp,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.getTypeTable();
            } else {
              this.$Message.info("无法删除！");
            }
          });
      } else {
        this.$Message.info("成员数不为0，无法删除！");
      }
    },
    registType() {
      this.typeModalTitle = "新建服务类型";
      this.isModalShowType = true;
    },
    deleteThemeClasses() {
      let temp = [];
      let allowDelete = true;
      for (let i = 0; i < this.selections_right.length; i++) {
        if (this.selections_right[i].members == 0) {
          temp.push(this.selections_right[i].id);
        } else {
          allowDelete = false;
          break;
        }
      }
      if (allowDelete) {
        this.axios
          .delete("/class", {
            data: {
              themeClassIds: temp,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.getThemeClass();
            } else {
              this.$Message.info("无法删除！");
            }
          });
      } else {
        this.$Message.info("成员数不为0，无法删除！");
      }
    },
    deleteThemeClass(row) {
      if (row.members == 0) {
        this.axios
          .delete("/class", {
            data: {
              themeClassIds: [row.id],
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.getThemeClass();
            } else {
              this.$Message.info("无法删除！");
            }
          });
      } else {
        this.$Message.info("成员数不为0，无法删除！");
      }
    },
    pageParams_right(page) {
      this.page_right = page;
      this.getThemeClass();
    },
    registThemeClass() {
      this.themeModalTitle = "新建主题分类";
      this.isModalShowThemeClass = true;
    },
    okClick_theme() {
      this.axios.post("/class", { themeClass: this.themeClass }).then((res) => {
        if (res.data.code == 200) {
          this.isModalShowThemeClass = false;
          this.getThemeClass();
        }
      });
    },
  },
};
</script>
<style scoped>
.typeConfig {
  height: 100%;
  width: 100%;
  background: rgba(250, 250, 250, 1);
}
.content {
  width: 100%;
  height: calc(100% - 40px);
  padding-top: 10px;
}
.left {
  width: 50%;
  padding: 15px;
  float: left;
}
.right {
  width: 50%;
  padding: 15px;
  float: right;
}
.btnContainer {
  float: right;
}
.btn {
  margin: 0 1rem;
  background: rgb(0, 63, 84) !important;
  color: rgb(255, 255, 255, 0.8);
}
.pageContainer {
  text-align: center;
  margin-top: 50px;
}
</style>
